$(function(){
    var usercook = tool.getCookie('phone');
    console.log(usercook);
if(usercook){
    var str = `
    <li><a href="html.html">${usercook}</a></li>    
    <a class="logout" href = "login.html" >退出</a>
    `
    $('.logout').click(function(){
        layer.confirm('你确认要退出吗？', {
            btn: ['残忍离开','我再想想'] //按钮
        }, function(){
            layer.msg('退出成功', {
                icon: 1,
                time:1500
            },function(){
                tool.removeCookie('phone');
                var str = `
                    <li>
                        <a href="login.html">登录</a>
                    </li>
                    <li>
                        <a href="register.html">注册</a>
                    </li>
                `
                $('.ulest').html(str)
            });
        }, function(){
            layer.msg('取消退出', {
                time: 1500, //20s后自动关闭
            });
        });
        return false;
    })
}else{
    // 没有登录
    layer.msg('请先登录',{
        icon:2,
        time:1500
    },function(){
        localStorage.setItem('url',location.href)
        location.href = 'login.html';
    })
}
// 获取数据
var data = localStorage.getItem('data') // []
console.log(data);
if(!data){
    // 没有添加过购物车
    // 显示没有东西-赶快挑选
    let str = `
    <div class="container">
        <ol class="breadcrumb">
            <li><a href=""class="iconfont">&#xe64e; 首页</a></li>
            <li><a href="">&gt; 购物车</a></li>
        </ol>
        <div class="message-tip">
            <h1>您的购物车中尚未添加商品，请先选择商品</h1>
            <div class="link">
                <a href="./list.html" class="btn btn-primary">返回上一页</a>
            </div>
        </div>
    </div> 
    `
    $('.cart').html(str)
}else{
    // 将数据转数组
    let arr = JSON.parse(data)
    console.log(data);
    // 将当前用户的商品筛选出来
    let currentArr = arr.filter(goods=>goods.phone === usercook)
    console.log(currentArr);
    if(!currentArr.length){
        let str = `
        <div class="container">
            <ol class="breadcrumb">
                <li><a href=""class="iconfont">&#xe64e; 首页</a></li>
                <li><a href="">&gt; 购物车</a></li>
            </ol>
            <div class="message-tip">
                <h1>您的购物车中尚未添加商品，请先选择商品</h1>
                <div class="link">
                    <a href="./list.html" class="btn btn-primary">返回上一页</a>
                </div>
            </div>
        </div> 
        `
        $('.cart').html(str)
    }
    // 使用map方法将数组中的所有goodsid获取到
    let idsArr = currentArr.map(goods=>goods.goodsid)
    console.log(idsArr);
    // 将所有商品id做成字符串
    let idsStr = idsArr.join(',')
    // console.log(idsStr);
    // 根据这个数据到数据库中查询所有商品的其他信息
    $.get('./php/cart.php',{ids:idsStr},res=>{
        let {meta:{status,msg},data} = res;
        if(status===0){
            // 将本地存储中的数量放到请求回来的数据中
            data.forEach(goods=>{
                currentArr.forEach(currentGoods=>{
                    if(goods.id === currentGoods.goodsid){
                        goods.number = currentGoods.number
                    }
                })
            })
            // 遍历数据渲染页面
            let str = '';
            data.forEach(goods=>{
                str += `
                    <tr>
                        <td><input type="checkbox" checked name="selectOne"></td>
                        <td>${goods.name}</td>
                        <td><img src="${goods.imgpath.split('==========')[0]}" width="80" height="80"></td>
                        <td>￥<span class="price">${goods.price}</span>元</td>
                        <td class="number" data-stock="${goods.stock}">
                            <input type="button" name="reduce" value="-">
                            <input type="number" name="number" value="${goods.number}">
                            <input type="button" name="add" value="+">
                        </td>
                        <td class="xiaoji">￥<span class="subtotal">${goods.number * goods.price}</span>元</td>
                        <td data-id="${goods.id}">
                            <input type="button" value="删除" class="btn btn-danger delCart">
                        </td>
                    </tr>
                `
            })
            $('table tbody').html(str)
            // 购物车功能
            // 全选功能
            selectAll()
            // 单选功能
            selectOne()
            // 数量加
            add()
            // 数量减
            reduce()
            // 计算小计
            subtotal()
            // 计算总数量和总价格
            total()
            // 删除购物车
            delCart()
            // 清空购物车
            clearCart()
        }
    },'json')
}
// 清空购物车
function clearCart(){
    $('.clearCart').click(function(){
        let confirmindex = layer.confirm('你确定要把所有商品清空吗(不建议此操作)?',{
            btn:['确定','取消']
        },function(){
            // 将本地存储中当前用户的数据删除
            var data = localStorage.getItem('data')
            var arr = JSON.parse(data)
            // 从arr中将不属于当前用户的数据筛选出来
            var brr = arr.filter(goods=>goods.phone !== usercook)
            // 重新存
            localStorage.setItem('data',JSON.stringify(brr))
            let str = `
            <div class="container">
                <ol class="breadcrumb">
                    <li><a href=""class="iconfont">&#xe64e; 首页</a></li>
                    <li><a href="">&gt; 购物车</a></li>
                </ol>
                <div class="message-tip">
                    <h1>您的购物车中尚未添加商品，请先选择商品</h1>
                    <div class="link">
                        <a href="./list.html" class="btn btn-primary">返回上一页</a>
                    </div>
                </div>
            </div> 
            `
            $('.cart').html(str)
            
            layer.msg('删除成功',{
                time:1500,
                icon:1
            })
        })
    })
}
// 删除购物车
function delCart(){
    $('.delCart').click(function(){
        layer.confirm('你确定要删除吗？',{
            btn:['确定','取消']
        },()=>{
            $(this).parent().parent().remove()
            // 将当前数据从本地存储中删除
            // 获取
            var data = localStorage.getItem('data')
            var arr = JSON.parse(data)
            var currentId = $(this).parent().attr('data-id')
            // 从数组中找到当前商品那个对象对应的下标
            var index = arr.findIndex(goods=>goods.goodsid === currentId)
            // 删除
            arr.splice(index,1)
            // 重新存
            localStorage.setItem('data',JSON.stringify(arr))
            total()
            layer.msg('删除成功',{
                time:1500,
                icon:1
            })
            let currentArr = arr.filter(goods=>goods.phone=== usercook)
            if(!currentArr.length){
                let str = `
                <div class="container">
                    <ol class="breadcrumb">
                        <li><a href=""class="iconfont">&#xe64e; 首页</a></li>
                        <li><a href="">&gt; 购物车</a></li>
                    </ol>
                    <div class="message-tip">
                        <h1>您的购物车中尚未添加商品，请先选择商品</h1>
                        <div class="link">
                            <a href="./list.html" class="btn btn-primary">返回上一页</a>
                        </div>
                    </div>
                </div> 
                `
                $('.cart').html(str)
            }
        })
        
    })
}
// 计算总数量和总价格
function total(){
    var totalNumber = 0
    var totalPrice = 0
    $('[name="selectOne"]:checked').each(function(i,checkbox){
        let number = $(checkbox).parent().siblings('.number').find('[name="number"]').val()-0
        totalNumber += number

        let xiaoji = $(checkbox).parent().siblings('.xiaoji').find('span.subtotal').text()-0
        totalPrice += xiaoji
    })
    $('.totalNumber').text(totalNumber)
    $('.totalPrice').text(totalPrice)
}
// 计算小计
function subtotal(){
    $('[name="number"]').each(function(i,numberInput){
        let number = $(numberInput).val()
        let price = $(numberInput).parent().prev().find('span.price').text()
        let sub = number * price;
        $(numberInput).parent().next().find('span.subtotal').text(sub)
    })
}
// 数量减
function reduce(){
    $('[name="reduce"]').click(function(){
        var number = $(this).next().val()-0
        number--
        if(number<=1){
            number = 1
        }
        $(this).next().val(number)
        // 将数量放到本地存储中
        // 先获取
        var data = localStorage.getItem('data')
        var arr = JSON.parse(data)
        // 获取当前商品的id
        var currentId = $(this).parent().siblings().last().attr('data-id')
        // 从数组中找到当前商品那个对象
        var obj = arr.find(goods=>goods.goodsid === currentId)
        // 操作数量
        obj.number = number
        // 存进去
        localStorage.setItem('data',JSON.stringify(arr))
        subtotal()
        total()
    })
}
// 数量加
function add(){
    $('[name="add"]').click(function(){
        var number = $(this).prev().val()-0
        number++
        if(number>$(this).parent().attr('data-stock')){
            number = $(this).parent().attr('data-stock')
        }
        $(this).prev().val(number)
        // 将数量放到本地存储中
        // 先获取
        var data = localStorage.getItem('data')
        var arr = JSON.parse(data)
        // 获取当前商品的id
        var currentId = $(this).parent().siblings().last().attr('data-id')
        // 从数组中找到当前商品那个对象
        var obj = arr.find(goods=>goods.goodsid === currentId)
        // 操作数量
        obj.number = number
        // 存进去
        localStorage.setItem('data',JSON.stringify(arr))
        subtotal()
        total()
    })
}
// 单选功能
function selectOne(){
    $('[name="selectOne"]').click(function(){
        // 将所有单选转成数组
        var arr = Array.prototype.slice.call($('[name="selectOne"]'))
        // 用every方法判断
        var bool = arr.every(checkbox=>checkbox.checked)
        // 设置两个全选
        $('[name="selectAll"]').prop('checked',bool)
        total()
    })
}
// 全选功能
function selectAll(){
    $('[name="selectAll"]').click(function(){
        $('[name="selectOne"]').prop('checked',$(this).prop('checked'))
        $('[name="selectAll"]').prop('checked',$(this).prop('checked'))
        total()
    })
}
})